

<div class="modal fade" id="modal-add">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add My Bid</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="myForm" class="form-horizontal">
                <div class="modal-body">
                    <div class="card-body">
                        <div class="form-group row">
                            <label for="Cusip" class="col-sm-2 col-form-label">Cusip</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="Cusip" placeholder="Cusip" disabled>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="dueDate" class="col-sm-2 col-form-label">Due Date</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="dueDate" placeholder="Due Date" disabled>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="marketPrice" class="col-sm-2 col-form-label">Starting Market Value($)</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="marketPrice"
                                    placeholder="Starting Market Value" disabled>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="myBitPrice" class="col-sm-2 col-form-label">My Bit Market Value($)</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="myBitPrice"
                                    placeholder="My Bit Market Value($)">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button id="openButton" type="submit" class="btn btn-primary">Update</button>
                    <dialog id="confirmationDialog">
                        <!-- <span class="close-button" onclick="closeDialog()">&times;</span> -->
                        <h3 id="confirmationMessage">欢迎来到对话框！</h3>
                        <p>这是一个使用 <code>&lt;dialog&gt;</code> 标签创建的对话框。</p>
                        <button onclick="closeDialog()">关闭</button>
                    </dialog>
                
                    <script>
                        // 获取按钮和对话框元素
                        const openButton = document.getElementById("openButton");
                        const confirmationDialog = document.getElementById("confirmationDialog");
                        const confirmationMessage = document.getElementById("confirmationMessage");

                
                        // 打开对话框
                        // openButton.addEventListener("click", function() {
                        //     myDialog.showModal(); // 显示对话框
                        // });

                        // 表单提交事件
                        myForm.addEventListener("submit", function(event) {
                            event.preventDefault(); // 阻止表单默认提交行为

                            // 模拟表单提交
                            const formData = new FormData(myForm);
                            const name = formData.get("name");
                            const email = formData.get("email");

                            // confirmationMessage.textContent = `表单提交成功！`;
                            // confirmationDialog.showModal(); 

                            // 模拟异步提交
                            setTimeout(() => {
                                // 模拟提交成功
                                confirmationMessage.textContent = `表单提交成功！`;
                                confirmationDialog.showModal(); // 显示确认窗口
                            }, 1000);

                        });

                        // 关闭对话框
                        function closeDialog() {
                            event.stopPropagation();
                            confirmationDialog.close(); // 关闭对话框
                        }

                    </script>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->